<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
  </style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
    window.onload = () => {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var raf;
        var running = false;

        var ball = {
            x: 100,
            y: 100,
            vx: 5,
            vy: 2,
            radius: 25,
            color: 'blue',
            draw: function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        };
        function clear() {
            // 我们使用的是 clearRect 函数帮我们清除前一帧动画
            // ctx.clearRect(0,0, canvas.width, canvas.height);

            // 若用一个半透明的 fillRect 函数取代之，就可轻松制作长尾效果。
            ctx.fillStyle = 'rgba(255,255,255,0.5)';
            ctx.fillRect(0,0,canvas.width,canvas.height);
        }

        function draw() {
            clear()
            ball.draw();

            // 为了让动作更真实，你可以像这样处理速度，这会逐帧减少垂直方向的速度，所以小球最终将只会在地板上弹跳。
            ball.vy *= .99;
            ball.vy += .25;

            // 若没有任何的碰撞检测，我们的小球很快就会超出画布。我们需要检查小球的 x 和 y 位置是否已经超出画布的尺寸以及是否需要将速度矢量反转
            if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
                ball.vy = -ball.vy;
            }
            if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
                ball.vx = -ball.vx;
            }

            ball.x += ball.vx;
            ball.y += ball.vy;
            raf = window.requestAnimationFrame(draw);
        }

        // 为了更好地控制小球，我们可以用 mousemove事件让它跟随鼠标活动。
        canvas.addEventListener('mousemove', function(e){
            if (!running) {
                clear();
                ball.x = e.offsetX;
                ball.y = e.offsetY;
                ball.draw();
            }
        });

        // click 事件会释放小球然后让它重新跳起。
        canvas.addEventListener('click',function(e){
            if (!running) {
                raf = window.requestAnimationFrame(draw);
                running = true;
            }
        });

        canvas.addEventListener('mouseout', function(e){
            window.cancelAnimationFrame(raf);
            running = false;
        });

        ball.draw();
    }

</script>
</body>
</html>
